<template>
    <div>
        <el-form ref="form" label-width="70px" :inline="true" class="logoin-container" :rules="rules" :model="form">
            <h3 class="logoin_title">系统登陆</h3>
            <el-form-item label="用户名" prop="username">
                <el-input placeholder="请输入账号" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="username">
                <el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import Cookie from 'js-cookie'
import { getMenu } from '@/api'
export default {
    name: 'Logoin',
    data() {
        return {
            form: {
                username: '',
                password: '',
            },
            rules: {
                username: [
                    { required: true, trigger: 'blur', message: '请输入用户名' }
                ],
                password: [
                    { required: true, trigger: 'blur', message: '请输入密码' }
                ],
            },
        }
    },
    methods: {
        submit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let result = await getMenu(this.form)
                    result = result.data
                    if (result.code == 20000 || result.code == 200) {
                        console.log(result.data);
                        Cookie.set('token', result.data.token)

                        /* 获取菜单数据存入store中 */
                        this.$store.commit('setMenu', result.data.menu)

                        this.$store.commit('addMenu', this.$router)

                        this.$router.push('/home')
                    } else {
                        this.$message.error(result.data.message);
                    }
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.logoin-container {
    width: 350px;
    border: 1px solid #eaeaea;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 25px #cac6c6;
    box-sizing: border-box;

    .el-input {
        width: 198px;
    }

    .logoin_title {
        margin: 0 auto 40px auto;
        text-align: center;
        color: #505458;
        font-size: 20px;
        font-weight: bold;
    }

    .el-form-item {

        .el-button {
            margin-left: 105px;
            margin-top: 10px;
        }
    }
}
</style>